@import './custom.scss';
@import './element-ui.scss';
@import './backstage.scss';
@import "reactive";

// html, body, #app {
//     height: 100%;
//     width: 100%;
//     margin: 0px;
//     padding: 0px;
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
//     background-image: url('@/assets/images/index/bg.png');
// }
* {
    letter-spacing: 1px;
}
html, body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--el-text-color-primary);
    font-size: var(--el-font-size-base);
    font-family: "PingFang SC";
    overflow: hidden;
}

//滚动条样式
::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, .3);
    border-radius: 6px;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0);
}

pre {
    background-color: var(--el-fill-color);
    padding: 20px;
}
.border {
    border: 1px solid #DCDCDC;
}
.line-bottom {
    border-bottom: 1px solid #DADBDD;
}
.line-bottom-dotted {
    border-bottom: 1px dotted #DADBDD;
}
.color-black {
    color: #1A1A1A;
}
.color-gray {
    color: gray;
}
.color-gray-light {
    color: #4D4D4D;
}

.color-blue {
    color: blue;
    &.hover:hover {
        color: darken(blue, 10%);
    }
}
.color-blue-light {
    color: #589aff;
    &.hover:hover {
        color: darken(#589aff, 10%);
    }
}

.relative {
    position: relative;
}
.full {
    width: 100%;
}

.center {
    text-align: center;
}
.right {
    float: right;
}

.flex {
    display: flex;
    align-items: center;
}
.flex-center {
    justify-content: center;
}
.flex-between {
    justify-content: space-between;
}
.flex-end {
    justify-content: flex-end;
}
@for $i from 0 to 41 {
    @for $j from 0 to 41 {
        .margin-#{$i}-#{$j} {
            margin: #{$i}px #{$j}px;
        }
    }
}
@for $i from 0 to 41 {
    @for $j from 0 to 41 {
        .padding-#{$i}-#{$j} {
            padding: #{$i}px #{$j}px;
        }
    }
}

@for $i from 0 to 41 {
    .padding-#{$i} {
        padding: #{$i}px;
    }
}

@for $i from 0 to 41 {
    .margin-#{$i} {
        margin: #{$i}px;
    }
}

@for $i from 0 to 41 {
    .size-#{$i} {
        font-size: #{$i}px;
    }
}